<template>
  <div>
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        label-position="right"
        label-width="120px"
        :model="formLabelAlign"
      >
        <el-form-item label="姓名：">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-input v-model="formLabelAlign.sex"></el-input>
        </el-form-item>
        <el-form-item label="班级：" v-if="type === '2'">
          <el-input v-model="formLabelAlign.class"></el-input>
        </el-form-item>
        <!-- <el-form-item label="学号：" v-if="type === '2'">
          <el-input v-model="formLabelAlign.studentId"></el-input>
        </el-form-item> -->
        <el-form-item label="电话：">
          <el-input v-model="formLabelAlign.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyChange">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";
export default {
  components: {},
  props: {
    formLabelAlign: {
      default: () => {
        return {
          name: "",
        sex: "",
        class: "一班",
        //studentId: "",
        phone: "",
        };
      },
    },
  },
  data() {
    return {
      dialogVisible: false,
      // formLabelAlign: {
      //   name: "",
      //   sex: "",
      //   class: "一班",
      //   //studentId: "",
      //   phone: "",
      // },
    };
  },

  computed: {
    ...mapState({
      type(state) {
        return state.app.type;
      },
    }),
  },
  watch: {},
  beforeDestroy() {},
  created() {},
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$message({
        type: "warning",
        message: "已取消编辑",
      });
    },
    openDialog() {
      this.dialogVisible = true;
    },
    submit() {
      console.log(this.formLabelAlign);
    },
    modifyChange: function() {
      
      let user_id = localStorage.getItem('yh');
      let user_info = this.formLabelAlign;
      let ind = localStorage.getItem('lx');

      console.log(user_id);
      console.log(user_info);
      if(ind =='1')
      {
        axios
        .post("/api/user/change_tea", { user_id, user_info })
        .then(function(response) {
          console.log(response.data)
          location.reload();
        })
        .catch(function(error) {
          console.log(error);
        });
      }
      else
      if(ind =='2')
      {
         axios
        .post("/api/user/change_stu", { user_id, user_info })
        .then(function(response) {
          console.log(response.data)
          location.reload();
        })
        .catch(function(error) {
          console.log(error);
        });
      }

      
      // $("#changeInfo").modal("hide");
    },
    changeStu: function(index) {
      this.$set(this.count, 0, index);//我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性
      //index是传递过来的数量，被放到动态变量count中
      this.visiblevar = true
      console.log(0);
      //$("#changeInfo").modal("show");//$('#myModal').modal('show') //显示$('#myModal').modal('hide')隐藏
      console.log(1);
      //modal框弹层
    },
    deleteStu: function(index) {
      this.$set(this.count, 0, index);
      console.log(this.count[0]);
      let user_id = this.count[0];
      
      console.log("user_id",user_id);
      axios
        .post("/api/user/delete_stu", { user_id })
        .then(ans => {
          console.log(ans);//{data: "delete success.", status: 200, statusText: "OK", headers
          location.reload();
        })
        .catch(er => {
          console.log(er);
        });
    }
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  position: static !important;
}
/deep/ .el-dialog {
  .el-dialog__header {
    background: #143853 !important;
  }
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__body {
    color: #ffffff;
    padding-bottom: 20px;
    background: #0f2d43 !important;
  }
  .el-dialog__footer {
    padding-right: 40px;
    background: #0f2d43;
  }
  .el-form-item__label {
    color: #ffffff;
  }
  .el-input__inner {
    background: #0355a4 !important;
    border: none;
    color: #ffffff;
  }
}
</style>